<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:outputText  escape="false"  >
    <script type="text/javascript">
	
	function tablefilter(table_selector, input_selector, search_level, colspan) {

		var table = $(table_selector);
		if(table.length == 0)
			return;

		var input = $(input_selector);
		if(input.length == 0)
			return;

		if(search_level == "undefined" || search_level == 1)
			search_level = 3;

		if(colspan == "undefined" || colspan == 0)
			colspan = 2;

		$(input).val("Buscar…");

		$(input).focus(function() {
			if($(this).val() == "Buscar…") {
				$(this).val("");
			}
			$(this).select();
		});

		$(input).blur(function() {
			if($(this).val() == "") {
				$(this).val("Buscar…");
			}
		});

		$(input).keyup(function() {
			if($(this).val().length >= search_level) {
				// Ocultamos las filas que no contienen el contenido del edit.
				$(table).find("tbody tr").not(":contains(\"" + $(this).val() + "\")").hide();
				
				// Si no hay resultados, lo indicamos.
				if($(table).find("tbody tr:visible").length == 0) {
					$(table).find("tbody:first").append('<tr id="noresults" class="aligncenter"><td colspan="' + colspan + '">Lo siento pero no hay resultados para la búsqueda indicada.</td></tr>');
				}
			} else {
				// Borramos la fila de que no hay resultados.
				$(table).find("tbody tr#noresults").remove();
				
				// Mostramos todas las filas.
				$(table).find("tbody tr").show();
			}
		});
	}
	
	jQuery.expr[':'].contains = function(a, i, m) { 
		return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
	};
	
	$(document).ready(function() {
		tablefilter("#tablaSort", "#searchInList", 2, 5);
	});

    </script>
    </h:outputText>
         <div class="tab-pane fade" id="search">
             <div class="hero-unit">
                 <h:form>
                 <h2>Búsqueda de cursos</h2>
                 <h:commandButton class="btn btn-info" value="Buscar" actionListener="#{searchMB.search}"/>
                 <button class="btn btn-info">Limpiar</button>
                 <input id="searchInList" type="text" class="pull-right" placeholder="Filtar..."/>
                 </h:form>  
                 <br/>
                 <h:dataTable class="table table-bordered table-striped" style="background-color: white;" value="#{searchMB.courses}" var="course" id="tablaSort">
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="Curso"/>
                            </f:facet>
                            <h:outputText value="#{course.courseName}"/>
                        </h:column>
                        <h:column>
                               <f:facet name="header">
                                    <h:outputText value="universidad"/>
                               </f:facet>
                            <h:outputText value="#{course.universityName}"/> 
                        </h:column>
                        <h:column>
                               <f:facet name="header">
                                  <h:outputText value="Categoría"/>
                               </f:facet>
                            <h:outputText value="#{course.categoryName}"/>
                        </h:column>
                        <h:column>
                               <f:facet name="header">
                                  <h:outputText value="Profesor"/>
                               </f:facet>
                            <h:outputText value="#{course.professorName}"/>
                        </h:column>
                        <h:column>
                               <f:facet name="header">
                                  <h:outputText value="Más"/>
                               </f:facet>
                               <img src="../img/icons/icon-delete.jpg"/><img src="../img/icons/icon_edit.gif"/><img src="../img/icons/icon-details.gif"/>
                        </h:column>
                   </h:dataTable>
             </div>   
         </div>
 
</html>

